﻿@using WriterStars.Models
@model LoginViewModel
@{
    this.Layout = "/views/shared/_LayoutHome.cshtml";
    ViewBag.Title = "Log in";
}

<style>
    .sign-in-section {
        padding-top: 2em;
    }

        .sign-in-section .header {
            font-size: 3em;
            font-weight: 100;
            transition: 0.3s;
        }

    @@media screen and (max-width: 420px) {
        .sign-in-section {
            padding-top: 0;
        }
            .sign-in-section .header {
                font-size: 2em;
                font-weight: 100;
            }
    }
</style>

<style>
    .facitweb {
        font-family: 'jaf-facitweb';
    }


    .btn-login {
        background: #AD4B38;
        color: white;
        width: 50%;
    }

    .btn-social {
        height: 52px;
        padding-right: 0px;
        line-height: 50px;
        position: relative;
        display: inline-block;
        cursor: pointer;
        font-size: 16px;
        font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
        font-weight: 500;
        font-stretch: normal;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

        .btn-social:after {
            height: 48px;
            width: 48px;
            position: absolute;
            left: 2px;
            top: 1px;
            content: " ";
        }

        .btn-social.facebook {
            width: 100%;
            color: #f1f1f1;
            text-shadow: 0 1px #173B86;
            border: 1px solid transparent;
            background: #4D78CE;
            background: -moz-linear-gradient(top, #4D78CE 0%, #456fa7 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D78CE), color-stop(100%, #456fa7));
            background: -webkit-linear-gradient(top, #4D78CE 0%, #456fa7 100%);
            background: -o-linear-gradient(top, #4D78CE 0%, #456fa7 100%);
            background: -ms-linear-gradient(top, #4D78CE 0%, #456fa7 100%);
            background: linear-gradient(to bottom, #4D78CE 0%, #456fa7 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D78CE', endColorstr='#456fa7',GradientType=0 );
        }

            .btn-social.facebook:after {
                background-image: url('../../img/icons/fb.png');
                border-right: 1px solid #5272AA;
            }

    .wrapper-facebook {
        position: relative;
        margin-bottom: 15px;
    }

    .sign-in-section .form-login {
        padding: 25px 0;
    }

        .sign-in-section .form-login input {
            font-family: 'jaf-facitweb';
            font-size: 16px;
        }
</style>
<section class="hero-writerstars sign-in-section">
    <h1 class="col-xs-12 text-center header">Sign in to WriterStars</h1>
    <div class=" col-xs-12 col-sm-8 col-md-4 block-centered text-center form-login">
        <div class="wrapper-facebook">
            @using (Html.BeginForm("ExternalLogin", "Account", new { ReturnUrl = ViewBag.ReturnUrl }))
            {
                @Html.AntiForgeryToken()
                <button type="submit" id="Facebook" class="btn-social facebook" name="provider" value="Facebook" title="Log in using your Facebook account">
                    &nbsp;&nbsp;&nbsp;&nbsp;Sign in with <strong>Facebook</strong>
                </button>
            }
        </div>
        <h6>
            OR
        </h6>
        <fieldset>
            @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                    </div>
                </div>
                @*<div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <div class="checkbox">
                                @Html.CheckBoxFor(m => m.RememberMe)
                                @Html.LabelFor(m => m.RememberMe)
                            </div>
                        </div>
                    </div>*@
                <div class="form-group">
                    <div class="col-md-10 text-left">
                        <input type="submit" value="Log in" class="btn btn-login" />
                    </div>
                </div>
                @*<p>
                        @Html.ActionLink("Register as a new user", "Register")
                    </p>*@
                @* Enable this once you have account confirmation enabled for password reset functionality
                    <p>
                        @Html.ActionLink("Forgot your password?", "ForgotPassword")
                    </p>*@
            }
        </fieldset>

    </div>
</section>

@*<div class="row">
        <div class="col-md-8">
            <section id="loginForm"></section>
        </div>
        <div class="col-md-4">
            <section id="socialLoginForm">
                @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
            </section>
        </div>
    </div>*@

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}